<template>
  <el-main class="bg edit_wrap">
    <el-form ref="form" :model="form" status-icon label-width="120px" v-if="is_view()">
      <el-row class="row_ce">
        <el-col v-if="user_group === '管理员' || $check_field('get','route_name') || $check_field('add','route_name') || $check_field('set','route_name')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="路线名称" prop="route_name">
            <el-input id="route_name" v-model="form['route_name']" placeholder="请输入路线名称"
                      v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','route_name')) || (!form['tourist_routes_id'] && $check_field('add','route_name'))"
                      :disabled="disabledObj['route_name_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','route_name')">{{ form['route_name'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','route_number') || $check_field('add','route_number') || $check_field('set','route_number')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="路线编号" prop="route_number">
            <el-input id="route_number" v-model="form['route_number']" placeholder="请输入路线编号"
                      v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','route_number')) || (!form['tourist_routes_id'] && $check_field('add','route_number'))"
                      :disabled="true"></el-input>
            <div v-else-if="$check_field('get','route_number')">{{ form['route_number'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','cover_photo') || $check_field('add','cover_photo') || $check_field('set','cover_photo')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="封面图片" prop="cover_photo">
            <el-upload :disabled="disabledObj['cover_photo_isDisabled']" id="cover_photo" class="avatar-uploader" drag
                       accept="image/gif, image/jpeg, image/png, image/jpg" action="" :http-request="upload_cover_photo"
                       :show-file-list="false"
                       v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','cover_photo')) || (!form['tourist_routes_id'] && $check_field('add','cover_photo'))">
              <img v-if="form['cover_photo']" :src="$fullUrl(form['cover_photo'])" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-image v-else-if="$check_field('get','cover_photo')" style="width: 100px; height: 100px"
                      :src="$fullUrl(form['cover_photo'])" :preview-src-list="[$fullUrl(form['cover_photo'])]">
              <div slot="error" class="image-slot">
                <img src="../../../public/img/error.png" style="width: 90px; height: 90px"/>
              </div>
            </el-image>
          </el-form-item>
        </el-col>
        <el-col
            v-if="user_group === '管理员' || $check_field('get','starting_point_of_the_route') || $check_field('add','starting_point_of_the_route') || $check_field('set','starting_point_of_the_route')"
            :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="路线起点" prop="starting_point_of_the_route">
            <el-input id="starting_point_of_the_route" v-model="form['starting_point_of_the_route']" placeholder="请输入路线起点"
                      v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','starting_point_of_the_route')) || (!form['tourist_routes_id'] && $check_field('add','starting_point_of_the_route'))"
                      :disabled="disabledObj['starting_point_of_the_route_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','starting_point_of_the_route')">{{ form['starting_point_of_the_route'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','route_endpoint') || $check_field('add','route_endpoint') || $check_field('set','route_endpoint')" :xs="24" :sm="12" :lg="8"
                class="el_form_item_warp">
          <el-form-item label="路线终点" prop="route_endpoint">
            <el-input id="route_endpoint" v-model="form['route_endpoint']" placeholder="请输入路线终点"
                      v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','route_endpoint')) || (!form['tourist_routes_id'] && $check_field('add','route_endpoint'))"
                      :disabled="disabledObj['route_endpoint_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','route_endpoint')">{{ form['route_endpoint'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','team_opening_time') || $check_field('add','team_opening_time') || $check_field('set','team_opening_time')" :xs="24" :sm="12"
                :lg="8" class="el_form_item_warp">
          <el-form-item label="开团时间" prop="team_opening_time">
            <el-input id="team_opening_time" v-model="form['team_opening_time']" placeholder="请输入开团时间"
                      v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','team_opening_time')) || (!form['tourist_routes_id'] && $check_field('add','team_opening_time'))"
                      :disabled="disabledObj['team_opening_time_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','team_opening_time')">{{ form['team_opening_time'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','number_of_group_members') || $check_field('add','number_of_group_members') || $check_field('set','number_of_group_members')"
                :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="组团人数" prop="number_of_group_members">
            <el-input-number id="number_of_group_members" v-model.number="form['number_of_group_members']"
                             v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','number_of_group_members')) || (!form['tourist_routes_id'] && $check_field('add','number_of_group_members'))"
                             :disabled="disabledObj['number_of_group_members_isDisabled']"></el-input-number>
            <div v-else-if="$check_field('get','number_of_group_members')">{{ form['number_of_group_members'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','individual_expenses') || $check_field('add','individual_expenses') || $check_field('set','individual_expenses')" :xs="24" :sm="12"
                :lg="8" class="el_form_item_warp">
          <el-form-item label="单人费用" prop="individual_expenses">
            <el-input-number id="individual_expenses" v-model.number="form['individual_expenses']"
                             v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','individual_expenses')) || (!form['tourist_routes_id'] && $check_field('add','individual_expenses'))"
                             :disabled="disabledObj['individual_expenses_isDisabled']"></el-input-number>
            <div v-else-if="$check_field('get','individual_expenses')">{{ form['individual_expenses'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','tourism_classification') || $check_field('add','tourism_classification') || $check_field('set','tourism_classification')" :xs="24"
                :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="旅游分类" prop="tourism_classification">
            <el-select id="tourism_classification" v-model="form['tourism_classification']"
                       v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','tourism_classification')) || (!form['tourist_routes_id'] && $check_field('add','tourism_classification'))">
              <el-option v-for="o in list_tourism_classification" :key="o['classification_name']" :label="o['classification_name']"
                         :value="o['classification_name']">
              </el-option>
            </el-select>
            <div v-else-if="$check_field('get','tourism_classification')">{{ form['tourism_classification'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','tour_guide_information') || $check_field('add','tour_guide_information') || $check_field('set','tour_guide_information')" :xs="24"
                :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="导游信息" prop="tour_guide_information">
            <el-input type="textarea" id="tour_guide_information" v-model="form['tour_guide_information']" placeholder="请输入导游信息"
                      v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','tour_guide_information')) || (!form['tourist_routes_id'] && $check_field('add','tour_guide_information'))"
                      :disabled="disabledObj['tour_guide_information_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','tour_guide_information')">{{ form['tour_guide_information'] }}</div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','route_details') || $check_field('add','route_details') || $check_field('set','route_details')" :xs="24" :sm="24" :lg="24"
                class="el_form_editor_warp">
          <el-form-item label="路线详情" prop="route_details">
            <quill-editor v-model.number="form['route_details']"
                          v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','route_details')) || (!form['tourist_routes_id'] && $check_field('add','route_details')) ">
            </quill-editor>
            <div v-else-if="$check_field('get','route_details')" v-html="form['route_details']"></div>
          </el-form-item>
        </el-col>
        <el-col v-if="user_group === '管理员' || $check_field('get','booking_notice') || $check_field('add','booking_notice') || $check_field('set','booking_notice')" :xs="24" :sm="24" :lg="24"
                class="el_form_editor_warp">
          <el-form-item label="预订须知" prop="booking_notice">
            <quill-editor v-model.number="form['booking_notice']"
                          v-if="user_group === '管理员' || (form['tourist_routes_id'] && $check_field('set','booking_notice')) || (!form['tourist_routes_id'] && $check_field('add','booking_notice')) ">
            </quill-editor>
            <div v-else-if="$check_field('get','booking_notice')" v-html="form['booking_notice']"></div>
          </el-form-item>
        </el-col>


      </el-row>
      <el-col :xs="24" :sm="12" :lg="8" class="el_form_btn_warp">
        <el-form-item v-if="$check_action('/tourist_routes/view','set') || $check_action('/tourist_routes/view','add') || $check_option('/tourist_routes/table','examine')">
          <el-button type="primary" @click="submit()">提交</el-button>
          <el-button @click="cancel()">取消</el-button>
        </el-form-item>
        <el-form-item v-else>
          <el-button @click="cancel()">返回</el-button>
        </el-form-item>
      </el-col>

    </el-form>
  </el-main>
</template>

<script>
import mixin from "@/mixins/page.js";

export default {
  mixins: [mixin],
  data() {
    return {
      field: "tourist_routes_id",
      url_add: "~/api/tourist_routes/add?",
      url_set: "~/api/tourist_routes/set?",
      url_get_obj: "~/api/tourist_routes/get_obj?",
      url_upload: "~/api/tourist_routes/upload?",

      query: {
        "tourist_routes_id": 0,
      },

      form: {
        "route_name": '', // 路线名称
        "route_number": this.$get_stamp(), // 路线编号
        "cover_photo": '', // 封面图片
        "starting_point_of_the_route": '', // 路线起点
        "route_endpoint": '', // 路线终点
        "team_opening_time": '', // 开团时间
        "number_of_group_members": 0, // 组团人数
        "individual_expenses": 0, // 单人费用
        "tourism_classification": '', // 旅游分类
        "tour_guide_information": '', // 导游信息
        "route_details": '', // 路线详情
        "booking_notice": '', // 预订须知
        "tourist_routes_id": 0, // ID

      },
      disabledObj: {
        "route_name_isDisabled": false,
        "route_number_isDisabled": false,
        "cover_photo_isDisabled": false,
        "starting_point_of_the_route_isDisabled": false,
        "route_endpoint_isDisabled": false,
        "team_opening_time_isDisabled": false,
        "number_of_group_members_isDisabled": false,
        "individual_expenses_isDisabled": false,
        "tourism_classification_isDisabled": false,
        "tour_guide_information_isDisabled": false,
        "route_details_isDisabled": false,
        "booking_notice_isDisabled": false,
      },


      // 旅游分类选项列表
      list_tourism_classification: [""],


    }
  },
  methods: {


    /**
     * 上传封面图片
     * @param {Object} param 图片参数
     */
    upload_cover_photo(param) {
      this.uploadFile(param.file, "cover_photo");
    },


    /**
     * 获取旅游分类列表
     */
    async get_list_tourism_classification() {
      var json = await this.$get("~/api/tourism_classification/get_list?");
      if (json.result && json.result.list) {
        this.list_tourism_classification = json.result.list;
      } else if (json.error) {
        console.error(json.error);
      }
    },


    /**
     * 获取对象之前
     * @param {Object} param
     */
    get_obj_before(param) {
      var form = "";
      if (this.form && form) {
        Object.keys(this.form).forEach(key => {
          Object.keys(form).forEach(dbKey => {
            // if(dbKey === "charging_standard"){
            // 	this.form['charging_rules'] = form[dbKey];
            // 	this.disabledObj['charging_rules_isDisabled'] = true;
            // };
            if (key === dbKey) {
              this.disabledObj[key + '_isDisabled'] = true;
            }
          })
        })
      }
      $.db.del("form");
      return param;
    },

    /**
     * 获取对象之后
     * @param {Object} json
     * @param {Object} func
     */
    get_obj_after(json, func) {


    },

    /**
     * 提交前验证事件
     * @param {Object} 请求参数
     * @return {String} 验证成功返回null, 失败返回错误提示
     */
    submit_check(param) {
      return null;
    },

    is_view() {
      var bl = this.user_group == "管理员";

      if (!bl) {
        bl = this.$check_action('/tourist_routes/table', 'add');
        console.log(bl ? "你有表格添加权限视作有添加权限" : "你没有表格添加权限");
      }
      if (!bl) {
        bl = this.$check_action('/tourist_routes/table', 'set');
        console.log(bl ? "你有表格添加权限视作有修改权限" : "你没有表格修改权限");
      }
      if (!bl) {
        bl = this.$check_action('/tourist_routes/view', 'add');
        console.log(bl ? "你有视图添加权限视作有添加权限" : "你没有视图添加权限");
      }
      if (!bl) {
        bl = this.$check_action('/tourist_routes/view', 'set');
        console.log(bl ? "你有视图修改权限视作有修改权限" : "你没有视图修改权限");
      }
      if (!bl) {
        bl = this.$check_action('/tourist_routes/view', 'get');
        console.log(bl ? "你有视图查询权限视作有查询权限" : "你没有视图查询权限");
      }

      console.log(bl ? "具有当前页面的查看权，请注意这不代表你有字段的查看权" : "无权查看当前页，请注意即便有字段查询权限没有页面查询权限也不行");

      return bl;
    },
    /**
     * 上传文件
     * @param {Object} param
     */
    uploadimg(param) {
      this.uploadFile(param.file, "avatar");
    },

  },
  created() {
    this.get_list_tourism_classification();
  },
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


</style>
